<template>
  <div class="orderBox">
    <div class="center">
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        status-icon
        :rules="rules"
        label-width="120px"
        class="demo-ruleForm"
      >
        <el-form-item label="秒杀订单超过:" prop="flashOrderOvertime">
          <!-- 第一个 -->
          <div class="big">
            <div class="btn">
              <el-input
                v-model="ruleForm.flashOrderOvertime"
                placeholder="请输入时间"
              >
                <template #append>分</template>
              </el-input>
            </div>
            <div class="text">未付款，订单自动关闭</div>
          </div>
        </el-form-item>
        <!-- 第二个 -->
        <el-form-item label="正常订单超过:" prop="normalOrderOvertime">
          <div class="big">
            <div class="btn">
              <el-input
                v-model="ruleForm.normalOrderOvertime"
                placeholder="请输入时间"
              >
                <template #append>分</template>
              </el-input>
            </div>
            <div class="text">未付款，订单自动关闭</div>
          </div>
        </el-form-item>
        <!-- 第三个 -->
        <el-form-item label="发货超过:" prop="commentOvertime">
          <div class="big">
            <div class="btn">
              <el-input
                v-model="ruleForm.commentOvertime"
                placeholder="请输入时间"
              >
                <template #append>天</template>
              </el-input>
            </div>
            <div class="text">未收货，订单自动完成</div>
          </div>
        </el-form-item>
        <!-- 第四个 -->
        <el-form-item label="订单完成超过:" prop="confirmOvertime">
          <div class="big">
            <div class="btn">
              <el-input
                v-model="ruleForm.confirmOvertime"
                placeholder="请输入时间"
              >
                <template #append>天</template>
              </el-input>
            </div>
            <div class="text">自动结束交易，不能申请售后</div>
          </div>
        </el-form-item>
        <!-- 第五个 -->
        <el-form-item label="订单完成超过:" prop="finishOvertime">
          <div class="big">
            <div class="btn">
              <el-input
                v-model="ruleForm.finishOvertime"
                placeholder="请输入时间"
              >
                <template #append>天</template>
              </el-input>
            </div>
            <div class="text">自动五星好评</div>
          </div>
        </el-form-item>
        <!-- 第六个 按钮 -->
        <el-form-item>
          <el-button type="primary" @click="submitForm(ruleFormRef)"
            >提交</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script setup lang="ts">
import { reactive, ref } from "vue";
import { getOrderSetApi, updateOrderSetApi } from "./api/api";
import type { FormInstance } from "element-plus";
// 获取订单设置数据
getOrderSetApi(1).then((res) => {
  console.log(res);
  Object.assign(ruleForm, res.data);
});
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive({
  // 发货超时
  commentOvertime: 0,
  //   订单完成,不能售后
  confirmOvertime: 0,
  //   订单完成,五星好评
  finishOvertime: 0,
  //   秒杀订单
  flashOrderOvertime: 0,
  //   正常订单
  normalOrderOvertime: 0,
});

const rules = reactive({
  commentOvertime: [
    { required: true, message: "时间不能为空", trigger: "blur" },
  ],
  confirmOvertime: [
    { required: true, message: "时间不能为空", trigger: "blur" },
  ],
  finishOvertime: [
    { required: true, message: "时间不能为空", trigger: "blur" },
  ],
  flashOrderOvertime: [
    { required: true, message: "时间不能为空", trigger: "blur" },
  ],
  normalOrderOvertime: [
    { required: true, message: "时间不能为空", trigger: "blur" },
  ],
});

const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      console.log("submit!");
      updateOrderSetApi(1, ruleForm).then((res) => {
        console.log(res);
      });
    } else {
      console.log("error submit!");
      return false;
    }
  });
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};
</script>
<style lang="less" scoped>
.orderBox {
  width: 1000px;
  border: 1px solid #ebeef5;
  margin: 50px auto 0;
}
.center {
  width: 800px;
  //   border: 1px solid #ebeef5;
  margin: 100px auto;
}
.big {
  display: flex;
  //   .btn {
  //     display: flex;
  //   }
  .text {
    margin-left: 30px;
  }
}
</style>
